import 'package:abc/view/GradientButton.dart';
import 'package:flutter/material.dart';


const Color _tagSelectedBg = Color(0xFF8A2BE2); // 选中标签的深紫色背景
class TopicSelectionSheet extends StatefulWidget {
  // 从外部传入的话题列表
  final List<String> topics;
  
  // 初始选中的话题列表
  final List<String> initialSelectedTopics;
  
  const TopicSelectionSheet({
    super.key, 
    required this.topics,
    this.initialSelectedTopics = const [],
  });

  @override
  State<TopicSelectionSheet> createState() => _TopicSelectionSheetState();
}

class _TopicSelectionSheetState extends State<TopicSelectionSheet> {
  // 存储当前选中的话题
  late List<String> _selectedTopics;

  @override
  void initState() {
    super.initState();
    // 初始化选中的话题列表
    _selectedTopics = List<String>.from(widget.initialSelectedTopics);
  }

  @override
  Widget build(BuildContext context) {
    // 使用 Column 包裹内容，并使用 Container 设置圆角和背景色
    return Container(
      height: MediaQuery.of(context).size.height * 0.5, // 占屏幕高度的 50%
      decoration:  BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(16.0),
          topRight: Radius.circular(16.0),
        ),
      ),
      child: Stack(
        children: [
          // 内容区域 (可滚动)
          Positioned.fill(
            bottom: 80, // 避开底部的确认按钮
            child: SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  _buildHeader(context),
                  const Divider(color: Color(0xFFE0E0E0), height: 1),
                  Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: _buildTopicTags(),
                  ),
                ],
              ),
            ),
          ),
          
          // 底部确认按钮 (固定在底部)
        
          _buildConfirmButton(context),
        ],
      ),
    );
  }

  // 顶部标题和关闭按钮
  Widget _buildHeader(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0),
      child: Stack(
        children: [
          SizedBox(
            width: double.infinity,
            child: Center(child:  Text(
            '话题选择',
            style: TextStyle(
              color: Colors.black,
              fontSize: 18,
              fontWeight: FontWeight.w600 ,
            ),
          ),),),
           Positioned(
            right: 0,
            child: InkWell(child: Image.asset(
                      'assets/images/ic_close.png',
                      width: 18,
                      height: 18,
                    ),onTap: () =>  Navigator.pop(context),))
       
        ],
      ),
    );
  }

  // 话题标签区域 (使用 Wrap 布局)
  Widget _buildTopicTags() {
    return Wrap(
      spacing: 12.0, // 水平间距
      runSpacing: 12.0, // 垂直间距
      children: widget.topics.map((topic) {
        final isSelected = _selectedTopics.contains(topic);
        return GestureDetector(
          onTap: () {
            setState(() {
              if (isSelected) {
                _selectedTopics.remove(topic);
              } else {
                _selectedTopics.add(topic);
              }
            });
          },
          child: Container(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            decoration: BoxDecoration(
              //color: isSelected ? _tagSelectedBg : const Color(0xFFF0F0F0),
              borderRadius: BorderRadius.circular(20),
              border: Border.all(
                color: isSelected ? _tagSelectedBg : const Color(0xFFC7C8CA),
                width: 1,
              ),
            ),
            child: Text(
              topic,
              style: TextStyle(
                color: isSelected ? Color(0XFFA877F4) : Color(0XFF96979B),
                fontSize: 14,
              ),
            ),
          ),
        );
      }).toList(),
    );
  }

  // 底部确认选择按钮
  Widget _buildConfirmButton(BuildContext context) {
    return Positioned(
      bottom: 16,
      left: 16,
      right: 16,
      child:   GradientButton(text: '确定选择', margin: EdgeInsetsGeometry.all(0), onPressed: () {
              Navigator.pop(context, _selectedTopics); 
          },),
    );
  }
}